<template>
	<view class="flex-column-between container">
		<div class="content-pannel">
			<div class="top flex-box">
				<div class="avator"></div>
				<div class="flex-column">
					<span class="name">{{user.userName}}</span>
					<span class="phone">{{user.account}}</span>
				</div>

			</div>
			<div class="list flex-column-center">
				<div class="item flex-between" @click="editPsw">
					<div class="left flex-box">
						<image class="psw" src="../../static/imgs/psw_icon.png" alt="">
						<span>密码修改</span>
					</div>
					<image class="right" src="../../static/imgs/right.png" alt="">
				</div>
			</div>
			<div class="btn" @click="logout">退出登录</div>
		</div>

		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabbar.vue'

	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user:uni.getStorageSync('user')
			}
		},
		methods: {
			logout() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			editPsw(){
				uni.navigateTo({
					url: '/pages/reset/index'
				})
			}
		},
		mounted() {
			console.log(this.user)
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;

		.content-pannel {
			position: relative;
			flex: 1;

			.top {
				width: 100%;
				height: 399upx;
				background: url('../../static/imgs/my_bg.png')no-repeat;
				background-size: 100% 100%;
				padding-left: 91upx;
				position: relative;

				.avator {
					width: 111upx;
					height: 111upx;
					background: rgba(255, 255, 255, 0.18);
					border-radius: 50%;
					margin-right: 35upx;
				}

				.name {
					font-size: 36upx;
					color: #fff;
					font-weight: bold;
				}

				.phone {
					color: rgba(255, 255, 255, 0.57);
					font-size: 28upx;
					margin-top: 20upx;
				}

			}

			.list {
				position: absolute;
				width: 681upx;
				justify-content: center;
				top: 380upx;
				left: 50%;
				transform: translateX(-50%);

				.item {
					width: 100%;
					height: 127upx;
					padding: 20upx 38upx;
					background: #fff;
					border-radius: 20upx;
					box-sizing: border-box;
					font-size: 32upx;

					.psw {
						width: 39upx;
						height: 39upx;
						margin-right: 15upx;
					}

					.right {
						width: 14upx;
						height: 25upx;
					}
				}
			}

			.btn {
				position: absolute;
				bottom: 240upx;
				left: 50%;
				transform: translateX(-50%);
				width: 500upx;
				height: 88upx;
				background: linear-gradient(69deg, #478BFF 0%, #58BEFF 100%);
				border-radius: 44upx;
				text-align: center;
				line-height: 88upx;
				font-size: 36upx;
				font-weight: bold;
				color: #fff;
			}
		}

	}
</style>